<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .pie {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: yellowgreen;
            background-image: linear-gradient(to right, transparent 50%, #655 0);
        }

        .pie::before {
            content: '';
            display: block;
            margin-left: 50%;
            height: 100%;
            border-radius: 0 100% 100% 0/50%;
            background-color: inherit;
            transform-origin: left;
            transform: rotate(.2turn);
        }

        /* ----------------------------------------------------------------------------------- */
        ul {
            width: 400px;
            height: 400px;
            margin: 30px auto;
            background-color: #73859F;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
        }

        ul li {
            list-style: none;
            margin: auto;
            position: absolute;
            border: 200px solid transparent;
        }

        ul li span {
            position: absolute;
            font-size: 14px;
            top: -200px;
        }

        ul li:nth-child(1) {
            left: 50%;
            margin-left: -64.98393925px;
            border-left-width: 64.98393925px;
            border-right-width: 64.98393925px;
            border-top-color: yellow;
            transform: rotate(18deg);
        }

        ul li:nth-child(2) {
            border-radius: 50%;
            border-top-color: rgb(123, 123, 226);
            border-right-color: rgb(123, 123, 226);
            transform: rotate(81deg);
        }

        ul li:nth-child(3) {
            left: 50%;
            margin-left: -64.98393925px;
            border-left-width: 64.98393925px;
            border-right-width: 64.98393925px;
            border-top-color: red;
            transform: rotate(234deg);
        }

        ul li:nth-child(4) {
            left: 50%;
            margin-left: -145.3085056px;
            border-left-width: 145.3085056px;
            border-right-width: 145.3085056px;
            border-top-color: #fff;
            transform: rotate(288deg);
        }

        ul li:nth-child(5) {
            left: 50%;
            margin-left: -64.98393925px;
            border-left-width: 64.98393925px;
            border-right-width: 64.98393925px;
            border-top-color: #25c940;
            transform: rotate(342deg);
        }

        /* ----------------------------------------------------------------------------------- */
        .mt10 {
            margin-top: 10px;
        }

        .shan {
            width: 80px;
            height: 80px;
            background-color: rgb(47, 85, 85);
            /* border-radius: 80px 0 0 ; */
            border-radius: 100% 0 0;
        }

        /* ----------------------------------------------------------------------------------- */
        .shanxing {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: burlywood;
        }

        .sx1 {
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(5deg);
            clip: rect(0px, 100px, 200px, 0px);
            /*clip此属性用来画半圆，在clip的rect范围内的内容显示出来，用到该属性的元素必须是absolute*/
            border-radius: 50%;
            background-color: rgb(64, 83, 105);
        }

        .sx2 {
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(-140deg);
            clip: rect(0px, 100px, 200px, 0px);
            /* clip此属性用来剪裁，rect (top, right, bottom, left)，视觉看起来是半圆，在clip的rect范围内的内容显示出来，用到该属性的元素必须是absolute*/
            border-radius: 50%;
            background-color: rgb(168, 199, 235);
        }
 /* ----------------------------------------------------------------------------------- */
        .triangle-up {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid rgb(207, 122, 122);
        }
    </style>
</head>

<body>
    <div class="pie"></div>
    <ul>
        <li><span>10%</span></li>
        <li><span>50%</span></li>
        <li><span>10%</span></li>
        <li><span>20%</span></li>
        <li><span>10%</span></li>
    </ul>
    <div style='margin-top: 10px;'>
        原理就是用画三角形的方法画一个个扇形，然后计算所需的旋转角度。画三角形的方法就是设置盒子的 width 和 height 为0，计算边框的宽度画出对应的三角形，麻烦的就是应该怎么去旋转这个扇形。
    </div>
    <div class="mt10">
        90度扇形:左上角是圆角，其余三个角都是直角：左上角的值为宽和高一样的值，其他三个角的值不变（等于0）
    </div>
    <div class="shan"></div>
    <div class="mt10">
        借用clip剪裁，画扇形
    </div>
    <div class="shanxing shanxing2">
        <div class="sx1"></div>
        <div class="sx2"></div>
    </div>
    <div class="triangle-up "></div>
    <script>
        /**
        less 代码
        //@r,@ul-color,@part,@color-list
        //可以自己换着玩，试试看
        //@part是累计百分比的数组，因为less不支持变量的递归定义，所以只能妥协用这种方法
        //函数的变量的定义涉及到角度计算和边框计算

        // 圆的半径
        @r:200px;
        //底色
        @ul-color: #73859F;
        //各部分所占的累加百分比(0.1,0.5,0.1,0.2,0.1)
        @part:0,0.1,0.6,0.7,0.9,1;
        //各个扇形的颜色
        @color-list:yellow,blue,red,#fff,rgb(37, 201, 64);

        ul {
            width: @r*2;
            height: @r*2;
            margin: auto;
            background-color: @ul-color;
            margin-top: 100px;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            li {
                list-style: none;
                margin: auto;
                position: absolute;
                border: @r solid transparent;
                span {
                    position: absolute;
                    font-size: 14px;
                    top:-@r;
                }
            }
            .fn(@part, @color-list, @r);
        }
        //绘制函数
        .fn(@part-list,@color-list,@r,@i:1) when (@i<length(@part-list)){
            //数组中累计百分比的当前值
            @acc:extract(@part-list,@i);
            //扇形所占的百分比
            @rate:extract(@part-list,@i+1) - @acc;
            //li元素的边框的宽度
            @x:abs(@r*tan(@rate*pi()));
            //扇形的颜色
            @color:extract(@color-list,@i);
            li:nth-child(@{i}){
                .sector-fn(@rate,@x,@acc,@color);
            }
            .fn(@part-list,@color-list,@r,@i+1);
        }

        //扇形函数
        .sector-fn(@rate,@x,@acc,@color) when not(@rate=0.5){
            @tag: if((@rate<0.5),0.5*@rate + @acc,0.5*(1 - @rate)+@acc);
            left: 50%;
            margin-left: -@x;
            border-left-width: @x;
            border-right-width: @x;
            border-top-color: if((@rate<0.5),@color,transparent);
            transform: rotate(@tag*360deg);

        }

        .sector-fn(@rate,@x,@acc,@color) when(@rate=0.5){
            border-radius: 50%;
                border-top-color: @color;
                border-right-color: @color;
            transform: rotate(@acc*360deg + 45deg);
        }
        */
    </script>
</body>

</html>